<template>
  <div class="vacation">
    <div class="vacation-top">周末去哪儿</div>
    <div v-for="(item,key) of vacationList" :key="key">
      <div class="vacation-img">
        <img :src='item.imgUrl'>
      </div>

      <div class="vacation-text">
        <p class="vacation-text-top">{{item.title}}</p>
        <p class="vacation-text-bottom">{{item.evaluate}}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HomeVacation',
  props: {
    vacationList: Array
  },
  data () {
    return {
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~styles/publicStyle.styl'
  @import '~styles/mixins.styl'
  .vacation
    margin-bottom
    .vacation-top
      height .8rem;
      padding 0 .2rem
      line-height .8rem
      color #212121
      font-size .32rem
    .vacation-img
      background #f5f5f5
      img
        margin-top .1rem
        width 100%
    .vacation-text
      background $bgWhite
      position relative
      padding .14rem .2rem .2rem .2rem
      .vacation-text-top
        font-size .32rem
        padding-right 1.4rem
        color #212121
        line-height .48rem
        ellipsis()
      .vacation-text-bottom
        padding-right 1.4rem
        font-size .24rem
        line-height .42rem
        ellipsis()
</style>
